<template>
	<view class="gt-admin-content" >
		<view style="display: flex;flex-direction: column;height:100%;">
			<view style="flex-grow:1;height: 0;overflow: auto;">
				<view class="row" >
					<view class="col-auto">
						<view style="border: 1px solid #eeeeee;border-radius: 5px;">
							<table class="gt-table" align="center">
								<thead >
									<tr >
										<td v-if="table.batchSelect" width="50">
											<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
										</td>
										<td v-for="(column,key) in table.columns" :key="key">{{column.label}}</td>
									</tr>
								</thead>
								<tbody v-if="!table.list || table.list.length == 0">
									<tr class="gt-table-tr">
										<td :colspan="table.columns && table.columns.length + 1">
											<view class="t-center c-secondary pd-15">
												无数据
											</view>
										</td>
									</tr>
								</tbody>
								<tbody v-for="(row,rowIndex) in table.list" :key="rowIndex">
									<tr class="gt-table-tr">
										<td v-if="table.batchSelect">
											<checkbox
												:checked="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? false : true "
												@click="selectCheckBox(rowIndex)"></checkbox>
										</td>
										<td v-for="(column,columnIndex) in table.columns" :key="columnIndex">
											<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
												<!-- 插槽 -->
												<view v-if="column.type == 'custom'">
													<slot name="tableColumn" :row="row" :column="column" :rowIndex="rowIndex"></slot>
												</view>
												<!-- 时间 -->
												<view v-else-if="column.format == 'date'">
													{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
												</view>
												<view v-else-if="column.format == 'datetime'">
													{{ $tools.timeToDate(row[column.field],'Y-M-D h:m:s')  }}
												</view>
												<!-- 图片 -->
												<view v-else-if="column.format == 'img' && row[column.field] != ''" class="row pointer"
													@click="$fun.showImgs(row[column.field].split(','))">
													<image :class="column.size?column.size:'w-h-30'" class=" border-radius" :src="row[column.field]"></image>
												</view>
												<!-- 匹配 -->
												<view v-else-if="column.format == 'select'">
													{{ $tools.getListVal(selectList[column.field],row[column.field])}}
												</view>
												<!-- 复制文字 -->
												<view v-else-if="column.format == 'copy_text'">
													<text class="pointer" @click="$tools.copy(row[column.field])">
														<text class="mr-5">{{row[column.field]}}</text>
														<text class="iconfont icon-copy"></text>
													</text>
												</view>
												<!-- 复制匹配文字 -->
												<view v-else-if="column.format == 'copy_select'">
													
												</view>
												<!-- 按钮 -->
												<view v-else-if="column.format == 'btn'" >
													<view class="row" v-for="(btnItems,btnKey) in column.btnList" :key="btnKey" v-if=" table.status == btnItems.status">
														<view v-for="(btn,btnIndex) in btnItems.list" :key="btnIndex">
															<gt-btn 
																v-if="btn.url"
																:name="btn.name" 
																:iconClass="btn.iconClass" 
																:class="btn.class"
																:postUrl="btn.url(row)"
																:confirmText="'您确认此操作？'"
																@callBack="rowCallBack">
															</gt-btn>
															<view v-else @click="update(btn.label,row)">
																<gt-btn
																	:name="btn.name" 
																	:iconClass="btn.iconClass" 
																	:class="btn.class">
																</gt-btn>
															</view>
														</view>
													</view>
												</view>
												<!-- 自定义Value -->
												<view v-else-if="column.value">
													{{column.value(row[column.field],rowIndex,row)}}
												</view>
												<!-- 文字 -->
												<view v-else>{{ row[column.field] }}</view>
											</slot>
										</td>
									</tr>
									<slot name="tableChild" :row="row" :rowIndex="rowIndex"></slot>
								</tbody>
							</table>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="padding:15px 0 15px 15px;">
				<view class="row">
					<view>
						<view v-if="table.batchSelect" class="row">
							<view style="padding: 3.89px 15px 3.89px 0;">
								<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
							</view>
							<view v-if="item.status == table.status" v-for="(item,index) in table.batchSelect" :key="index">
								<view v-for="(batchSelectRow,batchSelectIndex) in item.list" :key="batchSelectIndex">
									<gt-btn v-if="batchSelectIndexList.length > 0" :class="batchSelectRow.class"
										:style="batchSelectRow.style" @callBack="batchCallBack"
										:postUrl="batchSelectRow.url+'?ids=' + table.ids " :name="batchSelectRow.label"></gt-btn>
									<view v-else class="btn btn-sm btn-disabled-line  mr-15">{{batchSelectRow.label}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="col-auto"></view>
					<view v-if="table.pageInfo">
						<view class="row ">
							<uni-pagination prevText="上一页" nextText="下一页" :total="table.pageInfo.totalCount"
								:pageSize="table.pageInfo.limit" :current="table.pageInfo.page" @change="pagination">
							</uni-pagination>
							<gt-select class="input-line input-sm page-limit ml-15" :list="pageLimitList" placeholder="10条"
								:value.sync="table.pageInfo.limit" @change="changePageLimit"></gt-select>
							<input class="input-line input-page ml-15 mr-15" type="number" v-model="searchPage" />
							<button class="btn btn-sm " @click="skipPage()"
								:disabled="searchPage == '' || searchPage ==  table.pageInfo.page || searchPage > table.pageInfo.totalPage">跳转</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-table",
		props: {
			table: {
				type: [Array, Object],
				default: function() {
					return {
						columns: [],
						list: []
					};
				}
			},
			selectList: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			}
		},
		created() {},
		data() {
			return {
				batchSelectIndexList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
				searchPage: ''
			}
		},
		computed: {
			selectAllCheckbox() {
				if (this.table.list && this.table.list.length != 0 && this.batchSelectIndexList && this.batchSelectIndexList
					.length == this.table.list.length) {
					return true;
				}
				return false;
			}
		},
		methods: {
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				this.$emit('changeSelection',this.batchSelectIndexList)
			},
			selectParentCheckBox() {
				if (this.table.list.length != 0 && this.batchSelectIndexList.length == this.table.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in this.table.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				this.$emit('changeSelection',this.batchSelectIndexList)
			},
			changePageInfo(info){
				this.batchSelectIndexList = [];
				this.$emit('changePageInfo',{
					page:info.page || this.table.pageInfo.page || 1,
					limit :info.limit || this.table.pageInfo.limit || 10,
				});
			},
			changePageLimit(e) {
				this.changePageInfo({
					page:1,
					limit:e || 10
				})
			},
			// 分页获取列表
			pagination(e) {
				this.changePageInfo({
					page:e.current
				})
			},
			// 分页跳转
			skipPage() {
				let skipPage = parseInt(this.searchPage);
				this.changePageInfo({
					page:skipPage
				})
				this.searchPage = '';
			},
			batchCallBack(e){
				if(e.msg){
					this.batchSelectIndexList = []
					this.$emit('batchCallBack')
				}
			},
			rowCallBack(e){
				if(e.msg){
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label,row){
				let obj = {
					label:label,
					row:row
				}
				this.$emit('update',obj)
			}
		}
	}
</script>

<style>
	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}
	
	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>
